<template>
    <div>

        <el-dialog title="车险保单详情" :visible.sync="dialogFormVisible" width="500px" >
            <el-form :model="content">
                <el-form-item label="保单号" label-width="90px">
                    <el-input v-model="content.carOrder.id" autocomplete="off" placeholder="保单号" disabled></el-input>
                </el-form-item>
                <el-form-item label="车牌号" label-width="90px">
                    <el-input v-model="content.carOrder.carId" autocomplete="off" placeholder="车牌号" disabled></el-input>
                </el-form-item>
                <el-form-item label="车座数" label-width="90px">
                    <el-input v-model="content.carOrder.seatNumber" autocomplete="off" placeholder="车座数" disabled></el-input>
                </el-form-item>
                <el-form-item label="车辆类型" label-width="90px">
                    <el-input v-model="content.carOrder.carType" autocomplete="off" placeholder="车辆类型" disabled></el-input>
                </el-form-item>
                <el-form-item label="起始日期" label-width="90px">
                    <el-input v-model="content.carOrder.beginDay" autocomplete="off" placeholder="保单开始日期" disabled></el-input>
                </el-form-item>
                <el-form-item label="结束日期" label-width="90px">
                    <el-input v-model="content.carOrder.endDay" autocomplete="off" placeholder="保单结束日期" disabled></el-input>
                </el-form-item>
                <span>投保人</span>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="content.policyHolder.phName" autocomplete="off" placeholder="姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" label-width="90px">
                    <el-input v-model="content.policyHolder.phIdcard" autocomplete="off" placeholder="身份证" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="90px">
                    <el-input v-model="content.policyHolder.phPhone" autocomplete="off" placeholder="手机号" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="90px">
                    <el-input v-model="content.policyHolder.phEmail" autocomplete="off" placeholder="邮箱" disabled></el-input>
                </el-form-item>
                <span>被保人</span>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="content.insured.inName" autocomplete="off" placeholder="姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" label-width="90px">
                    <el-input v-model="content.insured.inIdcard" autocomplete="off" placeholder="身份证" disabled></el-input>
                </el-form-item>
                <el-form-item label="与投保人关系" label-width="90px">
                    <el-input v-model="content.insured.inRelationship" autocomplete="off" placeholder="与投保人关系" disabled></el-input>
                </el-form-item>
                <span>金额流水（单位:元）</span>
                <el-form-item label="付款金额" label-width="90px">
                    <el-input v-model="content.bxOrder.totalAmount" autocomplete="off" placeholder="付款金额" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-container>
            <el-aside width="20px"></el-aside>
            <el-main>
                <el-table :data="tableData" border>
                    <el-table-column
                            prop="id"
                            label="保单号"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="beginDay"
                            label="起始时间"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="endDay"
                            label="结束时间"
                            width="250">
                    </el-table-column>
                    <el-table-column label="操作" width="350">
                        <template slot-scope="scope">
                            <el-button
                                    style="margin-right: 10px"
                                    size="mini"
                                    @click="downloadpic(scope.row)">下载电子保单</el-button>
                            <el-button
                                    style="margin-right: 10px"
                                    size="mini"
                                    @click="baodandetails(scope.row)">查看详情</el-button>
                            <el-button
                                    style="margin-right: 10px"
                                    size="mini"
                                    @click="lipeidan(scope.row)">关联理赔单</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>

        <br><br>
    </div>
</template>

<script>
export default {
    name: "mybaodan",
    data() {
        return {
            dialogFormVisible: false,
            tableData: [],
            content: {
                policyHolder: {
                    id: "1439953244892741633",
                    phName: "刘思博",
                    phIdcard: "423213124131",
                    phGender: "man",
                    phBirthday: null,
                    phPlace: "东莞",
                    phPhone: "18925540371",
                    phEmail: "liusibo61@foxmail.com"
                },
                insured: {
                    id: "1439953244959850498",
                    inName: "红米",
                    inRelationship: "parent",
                    inIdcard: "423213124131",
                    inGender: "man",
                    inBirthday: null
                },
                bxOrder: {
                    orderNo: "1439953245089873922",
                    subject: "乐驾人生·驾驶员及随车人员意外险（套餐版：保期一年）",
                    totalAmount: 0.01,
                    orderStatus: null,
                    createTime: null,
                    lastTime: null,
                    updateTime: null
                },
                userMessage: {
                    uemail: "1970475803@qq.com",
                    unickname: null,
                    uidcard: "214233656421434",
                    uphone: "13134234243",
                    uplace: "广东",
                    uname: "羊居原",
                    ubirthday: "2021-09-05",
                    ugender: null,
                    uid: "1439122695939416066"
                },
                carOrder: {
                    id: "1439953245152788482",
                    orderId: "1439953245089873922",
                    phId: "1439953244892741633",
                    inId: "1439953244959850498",
                    insuranceId: "1439124412101812225",
                    beginDay: "2021-09-20 22:03:01",
                    endDay: "2022-09-20 22:03:01",
                    carId: "沪A777777",
                    seatNumber: 5,
                    carType: "small",
                    earnedWay: "法定",
                    carOrderStatus: 1,
                    uid: "1439122695939416066"
                }
            }
        }
    },
    created() {
        this.getBaodanList();
    },
    methods : {
        downloadpic(row){
            let vm = this;
            let id = row.id;
            window.open("http://localhost:8081/user/carOrder/download/"+id);
        },
        baodandetails(row){
            let vm = this;
            let id = row.id;

            this.axios({
                url: '/myapi/user/carOrder/get/'+id,
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.content = response.data.content;
                    console.log(vm.content);
                }
                else {
                    vm.$message.error('获取失败');
                }
            });
            this.dialogFormVisible = true;
        },
        lipeidan(row){
            this.$store.state.baodanid = row.id;
            let vm = this;
            vm.$router.push('/home/guanlianlipei');
        },
        getBaodanList(){
            let vm = this;
            this.axios({
                url: '/myapi/user/carOrder/list/'+vm.$store.state.id,
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.tableData = response.data.content;
                    console.log(vm.tableData);
                }
                else {
                    vm.$message.error('获取列表失败');
                }
            });
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}
.el-aside {
    text-align: center;
    line-height: 200px;
}
.el-main {
    text-align: center;
}
</style>
